<!-- flv视频播放 -->
<template>
  <div class='video_container'>
    <video 
      class="full-height full-width" 
      ref="video" 
      :id='randomId' controls>
    </video>
  </div>
</template>

<script>
let flvjs = require('flv.js');

export default {
  name: '',
  props: ['src'],
  data() {
    return {
      randomId: Number(
        Math.random()
          .toString()
          .substr(3, 16) + Date.now()
      ).toString(36),

      flvPlayer: null,
    }
  },

  watch: {
    src(newV) {
      console.log(newV)
      this.videoPlay();
    }
  },

  created() {
    
  },

  mounted() {
    // this.videoPlay();
  },

  methods: {
    videoPlay() {
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById(this.randomId);
        this.flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: this.src
        });
        this.flvPlayer.unload()
        this.flvPlayer.attachMediaElement(videoElement);
        this.flvPlayer.load();
        this.flvPlayer.play();
        // console.log(flvPlayer)
      }
    }
  },

  destroyed() {
    
    this.flvPlayer.destroy()
  },
}
</script>

<style>
video,.video_container {
  width: 100%;
  height: 100%;
}
</style>